<script lang="ts" setup>
/**
 * 需要安装依赖及配置
 * [npm install three] three.js核心库
 * [npm install --save @types/three] 如果是vue3版本 需要安装该插件，其他版本请忽略
 * 如果为vite+ts构建应用，请在src目录下shims-vue.d.ts文件中加入 [declare module "@types/three"]
 * [npm i --save three-obj-mtl-loader] 加载.obj和.mtl文件的插件
 */
//导入three.js核心库
import * as THREE from 'three';
import {OBJLoader} from "three/examples/jsm/loaders/OBJLoader";
import {RenderPass} from 'three/examples/jsm/postprocessing/RenderPass'
import {OutlinePass} from 'three/examples/jsm/postprocessing/OutlinePass'
import {EffectComposer} from 'three/examples/jsm/postprocessing/EffectComposer'
import {ShaderPass} from 'three/examples/jsm/postprocessing/ShaderPass'
import {FXAAShader} from 'three/examples/jsm/shaders/FXAAShader'
import {CSS2DRenderer, CSS2DObject} from 'three/examples/jsm/renderers/CSS2DRenderer'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'


//数据模拟,罐区数据源需要是一个二维数组，分多个罐区，每个罐区分多个罐体
const tankFarms = [
  [
    {code: 'NB0987', name: '石油', unit: '吨', temperature: 35, tankHeight: 20, oilHeight: 13, ton: 100},
    {code: 'NB0988', name: '石油', unit: '吨', temperature: 35, tankHeight: 20, oilHeight: 13, ton: 100},
    {code: 'NB0981', name: '石油', unit: '吨', temperature: 35, tankHeight: 20, oilHeight: 13, ton: 100},
    {code: 'NB0982', name: '石油', unit: '吨', temperature: 35, tankHeight: 20, oilHeight: 13, ton: 100},
    {code: 'NB0983', name: '石油', unit: '吨', temperature: 35, tankHeight: 20, oilHeight: 13, ton: 100}
  ],
  [
    {code: 'NA0987', name: '石油', unit: '吨', temperature: 35, tankHeight: 20, oilHeight: 13, ton: 100},
    {code: 'NA0988', name: '石油', unit: '吨', temperature: 35, tankHeight: 20, oilHeight: 13, ton: 100},
    {code: 'NA0981', name: '石油', unit: '吨', temperature: 35, tankHeight: 20, oilHeight: 13, ton: 100},
    {code: 'NA0982', name: '石油', unit: '吨', temperature: 35, tankHeight: 20, oilHeight: 13, ton: 100},
  ],
  [
    {code: 'NK0983', name: '石油', unit: '吨', temperature: 35, tankHeight: 20, oilHeight: 13, ton: 100},
    {code: 'NK0987', name: '石油', unit: '吨', temperature: 35, tankHeight: 20, oilHeight: 13, ton: 100},
    {code: 'NK0988', name: '石油', unit: '吨', temperature: 35, tankHeight: 20, oilHeight: 13, ton: 100},
    {code: 'NK0981', name: '石油', unit: '吨', temperature: 35, tankHeight: 20, oilHeight: 13, ton: 100},
    {code: 'NK0982', name: '石油', unit: '吨', temperature: 35, tankHeight: 20, oilHeight: 13, ton: 100},
    {code: 'NL0987', name: '石油', unit: '吨', temperature: 35, tankHeight: 20, oilHeight: 13, ton: 100},
    {code: 'NL0988', name: '石油', unit: '吨', temperature: 35, tankHeight: 20, oilHeight: 13, ton: 100},
    {code: 'NL0981', name: '石油', unit: '吨', temperature: 35, tankHeight: 20, oilHeight: 13, ton: 100},
    {code: 'NL0982', name: '石油', unit: '吨', temperature: 35, tankHeight: 20, oilHeight: 13, ton: 100},
    {code: 'NL0982', name: '石油', unit: '吨', temperature: 35, tankHeight: 20, oilHeight: 13, ton: 100},
    {code: 'NL0982', name: '石油', unit: '吨', temperature: 35, tankHeight: 20, oilHeight: 13, ton: 100},
    {code: 'NL0982', name: '石油', unit: '吨', temperature: 35, tankHeight: 20, oilHeight: 13, ton: 100},
    {code: 'NL0982', name: '石油', unit: '吨', temperature: 35, tankHeight: 20, oilHeight: 13, ton: 100},
    {code: 'NL0982', name: '石油', unit: '吨', temperature: 35, tankHeight: 20, oilHeight: 13, ton: 100},
    {code: 'NL0982', name: '石油', unit: '吨', temperature: 35, tankHeight: 20, oilHeight: 13, ton: 100}
  ]
]

//用于存放three的group组，每一个组为一个罐区
const groupArray = [] as any;


//创建一个场景对象
const scene = new THREE.Scene()
//加载texture的一个类来加载文件
const textureLoader = new THREE.TextureLoader();
//加载背景资源
const texture = textureLoader.load('/Three/images/background/0.jpg');
//将背景赋予该场景
scene.background = texture;
//创建公共组
const AllGroup = new THREE.Group();
//动态生成罐区组
for (let j = 0; j < tankFarms.length; j++) {
  //创建组
  let group = new THREE.Group();
  //设置组位置坐标
  group.position.set(-170 + (j * 60), 0, -105);
  //将单个组添加到公共组
  AllGroup.add(group);
  //存储组
  groupArray.push(group);
}
//创建一个组group1
const group1 = new THREE.Group();
//创建一个组group2
const group2 = new THREE.Group();
//创建一个组group3
const group3 = new THREE.Group();
//设置group1对象位置坐标
group1.position.set(-40, 0, -105);
//设置group2对象位置坐标
group2.position.set(-40, 0, -115);
//设置group3对象位置坐标
group3.position.set(+10, 0, -85);
//将group1、group2、group3添加到公共组
AllGroup.add(group1, group2, group3);
//将公共组加入到场景中
scene.add(AllGroup);
const treeData = [
  {id: group1.id, label: '立筒仓', children: [],},
  {id: group1.id, label: '浅圆仓', children: [],},
  {id: group1.id, label: '平房仓', children: [],}
] as any;
//创建一个用于加载 .obj 资源的加载器
const OBJLoader_ = new OBJLoader();
const axesHelper = new THREE.AxesHelper(500);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
directionalLight.position.set(50, 250, 500);
scene.add(directionalLight);
const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight2.position.set(-400, -400, -400);
scene.add(directionalLight2);
const ambient = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambient);
const width = window.innerWidth;
const height = window.innerHeight;
const k = width / height;
const s = 100;
const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 20000);
//相机角度
camera.position.set(100, 100, 243);
camera.lookAt(scene.position);
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);
renderer.setClearColor(0x409EFF, 1);
const labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0';
labelRenderer.domElement.style.pointerEvents = 'none';
const renderPass = new RenderPass(scene, camera);
const outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
outlinePass.visibleEdgeColor = new THREE.Color(0, 1, 0);
outlinePass.hiddenEdgeColor = new THREE.Color(0, 1, 0);
outlinePass.edgeThickness = 3.0;
const composer = new EffectComposer(renderer);
composer.addPass(renderPass);
composer.addPass(outlinePass);
const FXAAShaderPass = new ShaderPass(FXAAShader);
FXAAShaderPass.renderToScreen = true;
FXAAShaderPass.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
composer.addPass(FXAAShaderPass);
const RainGroup = new THREE.Group();
for (let i = 0; i < 500; i++) {
  const spriteMaterial = new THREE.SpriteMaterial({map: new THREE.TextureLoader().load("/Three/images/rain/rain.png"),});
  const sprite = new THREE.Sprite(spriteMaterial);
  RainGroup.add(sprite);
  sprite.scale.set(3.2, 4, 1);
  const k1 = Math.random() - 0.5;
  const k2 = Math.random() - 0.5;
  sprite.position.set(500 * k1, 200 * Math.random(), 500 * k2)
}
for (let i = 0; i < 500; i++) {
  const spriteMaterial = new THREE.SpriteMaterial({map: new THREE.TextureLoader().load("/Three/images/rain/rain.png"),});
  const sprite = new THREE.Sprite(spriteMaterial);
  RainGroup.add(sprite);
  sprite.scale.set(2.4, 3, 1);
  const k1 = Math.random() - 0.5;
  const k2 = Math.random() - 0.5;
  sprite.position.set(500 * k1, 200 * Math.random(), 500 * k2)
}
const clock = new THREE.Clock();
const FPS = 30;
const T = 1 / FPS;
let timeS = 0;
let i = 0;
scene.rotateY(-0.3);

const render = () => {
  i += 1;
  if (i < 300) {
    scene.rotateY(0.001)
  }
  RainGroup.children.forEach(sprite => {
    sprite.position.y -= 0.5;
    if (sprite.position.y < 0) {
      sprite.position.y = 200
    }
  });
  requestAnimationFrame(render);
  const deltaT = clock.getDelta();
  timeS = timeS + deltaT;
  if (timeS > T) {
    composer.render();
    labelRenderer.render(scene, camera);
    timeS = 0
  }
}
render();
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', function () {
  console.log(camera)
  // 浏览器控制台查看相机位置变化
  console.log('camera.position',camera.position);
});
controls.enablePan = true;
controls.minZoom = 0.1;
controls.maxZoom = 3;

function creatGround() {
  const geometry = new THREE.PlaneGeometry(1000, 260);
  const texture = new THREE.TextureLoader().load("/Three/images/cementFloor/floor3.png");
  const material = new THREE.MeshLambertMaterial({map: texture, side: THREE.DoubleSide, transparent: true,});
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
  mesh.rotateX(-Math.PI / 2);
  mesh.position.y = -0.01
  mesh.position.x = 100;
}

function creatRoad() {
  const textureLoader = new THREE.TextureLoader();
  const geometry = new THREE.PlaneGeometry(24, 800);
  const texture = textureLoader.load('/Three/images/road/road2.png');
  texture.wrapS = THREE.RepeatWrapping;
  texture.wrapT = THREE.RepeatWrapping;
  texture.repeat.set(1, 10);
  const material = new THREE.MeshBasicMaterial({map: texture, side: THREE.DoubleSide,});
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
  mesh.rotateX(-Math.PI / 2);
  mesh.rotateZ(Math.PI / 2);
  mesh.position.z = 130 + 12
}


const label = null;
renderer.localClippingEnabled = true;
const PlaneArr = [new THREE.Plane(new THREE.Vector3(-1, 0, 0), 1), new THREE.Plane(new THREE.Vector3(0, 0, -1), 0)];
let lastMesh = {} as any;
const choose = (event: any) => {
  if (!_.isEmpty(lastMesh)) {
    params.bool = false;
    lastMesh.material.clippingPlanes = null;
    outlinePass.selectedObjects = []
  }
  const Sx = event.clientX;
  const Sy = event.clientY;
  params.left = Sx + 20;
  params.top = Sy + 20;
  const x = (Sx / window.innerWidth) * 2 - 1;
  const y = -(Sy / window.innerHeight) * 2 + 1;
  const raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
  const intersects = raycaster.intersectObjects(AllGroup.children, true);
  console.log(intersects)
  if (intersects.length > 0) {
    params.bool = true;
    const mesh = intersects[0].object as any;
    console.log(mesh)
    params.currentMesh = mesh.params;
    outlinePass.selectedObjects = [mesh];
    const S = params.currentMesh.吨位;
    params.S = 0;
    const startTime = new Date().getTime();
    const interval = setInterval(function () {
      if (new Date().getTime() - startTime > S / 58 * 6) {
        clearInterval(interval);
        return
      }
      if (params.S < S) {
        params.S += 58;
      }
    }, 6);
    scene.updateMatrixWorld(true);
    const worldPosition = new THREE.Vector3();
    mesh.getWorldPosition(worldPosition);
    lastMesh = mesh;
    PlaneArr[0].constant = worldPosition.x;
    PlaneArr[1].constant = worldPosition.z;
    mesh.material.clipIntersection = true;
    mesh.material.clippingPlanes = PlaneArr
  }
}
addEventListener('click', choose);
const params = reactive({
  treeData: treeData,
  currentMesh: {} as any,
  name: null,
  bool: false,
  left: 500,
  top: 500,
  switchBool: true,
  clipBool: true,
  tagBool: true,
  rainBool: true,
  conLeft: -150 - 30,
  openLeftBool: false,
  S: 0,
})

const nodeClick = (data: any) => {
  const mesh = data.mesh;
  if (mesh) {
    outlinePass.selectedObjects = [mesh];
    params.currentMesh = mesh;
    params.bool = true;
    scene.updateMatrixWorld(true);
    const worldPosition = new THREE.Vector3();
    mesh.getWorldPosition(worldPosition);
    const standardVector = worldPosition.project(camera);
    const a = window.innerWidth / 2;
    const b = window.innerHeight / 2;
    params.left = Math.round(standardVector.x * a + a);
    params.top = Math.round(-standardVector.y * b + b);
  } else {
    params.bool = false;
    outlinePass.selectedObjects = []
  }
}

/**
 * 隐藏显示粮仓变更事件
 * @param val
 */
const switchBoolChange = (val: Boolean) => {
  AllGroup.children.forEach((group) => {
    group.children.forEach((mesh: any) => {
      if (mesh.type === 'Mesh') {
        mesh.material.visible = val;
      }
    })
  })
}

/**
 * 隐藏显示标签变更事件
 * @param val
 */
const tagBoolChange = (val: Boolean) => {
  const arr = document.getElementsByClassName("label") as any;
  for (let i = 0; i < arr.length; i++) {
    arr[i].style.visibility = val ? 'hidden' : 'visible';
  }
}
/**
 * 隐藏显示天气变更事件
 * @param val
 */
const rainBoolChange = (val: Boolean) => {
  val ? scene.remove(RainGroup) : scene.add(RainGroup);
}

/**
 * 隐藏显示剖切变更事件
 * @param val
 */
const clipBoolChange = (val: boolean) => {
  renderer.localClippingEnabled = val;
}

onMounted(() => {
  nextTick(() => {
    //渲染围栏和门模型
    // OBJLoader_.load('/Three/models/wall.obj', function (obj: any) {
    //   obj.scale.set(0.98, 0.6, 1);
    //   const texLan = new THREE.TextureLoader().load('/Three/images/wall/lan2.png');
    //   texLan.wrapS = THREE.RepeatWrapping;
    //   texLan.wrapT = THREE.RepeatWrapping;
    //   texLan.repeat.set(40, 1);
    //   obj.children[0].material = new THREE.MeshBasicMaterial({
    //     side: THREE.DoubleSide,
    //     map: texLan,
    //     transparent: true,
    //   });
    //   obj.children[1].material = new THREE.MeshBasicMaterial({
    //     map: new THREE.TextureLoader().load('/Three/models/door.png'),
    //     side: THREE.DoubleSide,
    //     transparent: true,
    //   });
    //   scene.add(obj)
    // });
    //渲染粮仓模型1
    // OBJLoader_.load('/Three/models/gong001.obj', function (obj: any) {
    //   const mesh = obj.children[0];
    //   mesh.rotateZ(Math.PI);
    //   mesh.translateY(-36);
    //   for (let i = 0; i < 2; i++) {
    //     for (let j = 0; j < 3; j++) {
    //       const Mesh = mesh.clone();
    //       Mesh.material = new THREE.MeshPhongMaterial({
    //         map: new THREE.TextureLoader().load('/Three/models/d001.png'),
    //         transparent: true,
    //         side: THREE.DoubleSide,
    //         clipIntersection: true,
    //       });
    //       Mesh.编号 = "L-" + (i + 1) * (j + 1);
    //       Mesh.name = "立筒仓 L-" + (i + 1) * (j + 1);
    //       Mesh.translateX(i * 26);
    //       Mesh.translateZ(j * 21);
    //       Mesh.rotateY(Math.PI / 6);
    //       group1.add(Mesh);
    //       Mesh.仓高 = 36;
    //       Mesh.粮高 = (15 * Math.random() + 20).toFixed(1);
    //       Mesh.谷物 = '红豆';
    //       Mesh.温度 = (36 * (Math.random() / 10 + 0.9)).toFixed(1);
    //       Mesh.吨位 = Mesh.粮高 * 200;
    //       Mesh.iconpath = "/Three/UI/bean/红豆.png";
    //       const geometry2 = new THREE.CylinderGeometry(8 - 0.2, 8 - 0.2, Mesh.粮高, 25);
    //       const material2 = new THREE.MeshLambertMaterial({color: 0xb63427,});
    //       const mesh2 = new THREE.Mesh(geometry2, material2);
    //       Mesh.add(mesh2);
    //       mesh2.translateY(36 - Mesh.粮高 / 2);
    //       const text = document.getElementById('label') as any;
    //       text.cloneNode(true);
    //       text.style.visibility = "hidden";
    //       text.className = "label";
    //       text.childNodes[0].childNodes[1].textContent = Mesh.name;
    //       const label = new CSS2DObject(text);
    //       label.position.copy(Mesh.position);
    //       group1.add(label);
    //       treeData[0].children.push({id: Mesh.id, mesh: Mesh, label: Mesh.name, children: [],})
    //     }
    //   }
    // });


    //循环渲染罐区模型
    let count = 0;
    for (let k = 0; k < groupArray.length; k++) {
      OBJLoader_.load('/Three/models/002.obj', function (obj: any) {
        const mesh = obj.children[0];
        mesh.rotateZ(Math.PI);
        mesh.material = new THREE.MeshBasicMaterial({
          map: new THREE.TextureLoader().load('/Three/models/002.png'),
          side: THREE.DoubleSide,
          transparent: true,
          clipIntersection: true,
        });
        mesh.translateY(-20);
        mesh.translateZ(5);
        count = 0;
        for (let i = 0; i < 2; i++) {
          for (let j = 0; j < 10; j++) {
            if (count < tankFarms[k].length) {
              const Mesh = mesh.clone();
              Mesh.params = tankFarms[k][count];
              Mesh.material = new THREE.MeshPhongMaterial({
                map: new THREE.TextureLoader().load('/Three/models/002.png'),
                transparent: true,
                side: THREE.DoubleSide,
                clipIntersection: true,
              });
              Mesh.translateX(i * 25);
              Mesh.translateZ(j * 24);
              Mesh.rotateY(Math.PI / 6);
              groupArray[k].add(Mesh);
              Mesh.iconpath = "/Three/UI/bean/绿豆.png";
              const geometry2 = new THREE.CylinderGeometry(10 - 0.20, 10 - 0.20, Mesh.粮高, 25);
              const material2 = new THREE.MeshLambertMaterial({color: 0x91a337});
              const mesh2 = new THREE.Mesh(geometry2, material2);
              Mesh.add(mesh2);
              //罐体液位高度，根据实际情况调整，最好为实际计算的百分比
              mesh2.translateY(20 - tankFarms[k][count].oilHeight / 2);
              const text = document.getElementById('label') as any;
              text.cloneNode(true);
              text.style.visibility = "hidden";
              text.className = "label";
              text.childNodes[0].childNodes[1].textContent = Mesh.name;
              const label = new CSS2DObject(text);
              label.position.copy(Mesh.position);
              groupArray[k].add(label);
              treeData[1].children.push({id: Mesh.id, mesh: Mesh, label: Mesh.name, children: [],})
            }
            count++;
          }
        }
      });
    }

    //渲染粮仓模型2
    // OBJLoader_.load('/Three/models/002.obj', function (obj: any) {
    //   const mesh = obj.children[0];
    //   mesh.rotateZ(Math.PI);
    //   mesh.material = new THREE.MeshBasicMaterial({
    //     map: new THREE.TextureLoader().load('/Three/models/002.png'),
    //     side: THREE.DoubleSide,
    //     transparent: true,
    //     clipIntersection: true,
    //   });
    //   mesh.translateY(-20);
    //   mesh.translateZ(5);
    //   for (let i = 0; i < 2; i++) {
    //     for (let j = 0; j < 10; j++) {
    //       const Mesh = mesh.clone();
    //       Mesh.material = new THREE.MeshPhongMaterial({
    //         map: new THREE.TextureLoader().load('/Three/models/002.png'),
    //         transparent: true,
    //         side: THREE.DoubleSide,
    //         clipIntersection: true,
    //       });
    //       Mesh.编号 = "Q-" + (i + 1) * (j + 1);
    //       Mesh.name = "浅圆仓 Q-" + (i + 1) * (j + 1);
    //       Mesh.translateX(i * 25);
    //       Mesh.translateZ(j * 24);
    //       Mesh.rotateY(Math.PI / 6);
    //       group2.add(Mesh);
    //       Mesh.仓高 = 20;
    //       Mesh.粮高 = (10.9 * Math.random() + 9).toFixed(1);
    //       Mesh.谷物 = '绿豆';
    //       Mesh.温度 = (36 * (Math.random() / 10 + 0.9)).toFixed(1);
    //       Mesh.吨位 = Mesh.粮高 * 400;
    //       Mesh.iconpath = "/Three/UI/bean/绿豆.png";
    //       const geometry2 = new THREE.CylinderGeometry(10 - 0.20, 10 - 0.20, Mesh.粮高, 25);
    //       const material2 = new THREE.MeshLambertMaterial({color: 0x91a337});
    //       const mesh2 = new THREE.Mesh(geometry2, material2);
    //       Mesh.add(mesh2);
    //       mesh2.translateY(20 - Mesh.粮高 / 2);
    //       const text = document.getElementById('label') as any;
    //       text.cloneNode(true);
    //       text.style.visibility = "hidden";
    //       text.className = "label";
    //       text.childNodes[0].childNodes[1].textContent = Mesh.name;
    //       const label = new CSS2DObject(text);
    //       label.position.copy(Mesh.position);
    //       group2.add(label);
    //       treeData[1].children.push({id: Mesh.id, mesh: Mesh, label: Mesh.name, children: [],})
    //     }
    //   }
    // });
    //渲染粮仓模型3
    // OBJLoader_.load('/Three/models/003.obj', function (obj: any) {
    //   const mesh = obj.children[0];
    //   mesh.translateZ(2);
    //   mesh.translateX(1);
    //   mesh.material = new THREE.MeshBasicMaterial({
    //     map: new THREE.TextureLoader().load('/Three/models/003.png'),
    //     transparent: true,
    //     side: THREE.DoubleSide,
    //     clipIntersection: true,
    //   });
    //   mesh.scale.set(1.3, 1.4, 1.5);
    //   for (let i = 0; i < 2; i++) {
    //     for (let j = 0; j < 3; j++) {
    //       const Mesh = mesh.clone();
    //       Mesh.material = new THREE.MeshBasicMaterial({
    //         map: new THREE.TextureLoader().load('/Three/models/003.png'),
    //         transparent: true,
    //         side: THREE.DoubleSide,
    //       });
    //       Mesh.编号 = "P-" + (i + 1) * (j + 1);
    //       Mesh.name = "平房仓 P-" + (i + 1) * (j + 1);
    //       Mesh.translateX(i * 52.5);
    //       Mesh.translateZ(j * 81.6);
    //       group3.add(Mesh);
    //       Mesh.仓高 = 8;
    //       Mesh.粮高 = (4.9 * Math.random() + 3).toFixed(1);
    //       Mesh.谷物 = '黄豆';
    //       Mesh.温度 = (36 * (Math.random() / 10 + 0.9)).toFixed(1);
    //       Mesh.吨位 = Mesh.粮高 * 1000;
    //       Mesh.iconpath = "/Three/UI/bean/黄豆.png";
    //       const geometry2 = new THREE.BoxGeometry(21 - 0.2, Mesh.粮高, 40 - 0.2, 25);
    //       const material2 = new THREE.MeshLambertMaterial({color: 0xe99147});
    //       const mesh2 = new THREE.Mesh(geometry2, material2);
    //       Mesh.add(mesh2);
    //       mesh2.translateY(Mesh.粮高 / 2);
    //       const text = document.getElementById('label3') as any;
    //       text.cloneNode(true);
    //       text.style.visibility = "hidden";
    //       text.className = "label";
    //       text.childNodes[0].childNodes[1].textContent = Mesh.name;
    //       var label = new CSS2DObject(text);
    //       label.position.copy(Mesh.position);
    //       group3.add(label);
    //       treeData[2].children.push({id: Mesh.id, mesh: Mesh, label: Mesh.name, children: [],})
    //     }
    //   }
    // });

    const ThreeEl = document.getElementById('three') as any;
    ThreeEl.appendChild(renderer.domElement);
    ThreeEl.appendChild(labelRenderer.domElement);
    creatGround();
    creatRoad();
  })
})

</script>
<template>
  <div id="three" class="w-full h-full"></div>
  <div id="label" style="visibility:hidden">
    <div style="position:relative;">
      <div style="position: absolute;top:-50px;left:20px;width:100px;color:#03B5B3;">
      </div>
      <div style="position: absolute;top:-30px;left:0px;">
        <img src="/Three/UI/popLine/青色弹窗.png" alt="">
      </div>
    </div>
  </div>
  <div id="label3" style="visibility:hidden">
    <div style="position:relative;">
      <div style="position: absolute;top:-120px;left:55px;width:100px;color:#ffffff;">
      </div>
      <div style="position: absolute;top:-100px;left:0px;">
        <img src="/Three/UI/popLine/白色弹窗.png" alt="">
      </div>
    </div>
  </div>
  <div style="position: absolute;left: 25px;top: 50px;">
  </div>
  <div>
    <!--    <div class="HUD"-->
    <!--         style="background-color:rgba(255,255,255,0.1);padding:12px 20px;position: absolute;left: 50px;top: 65px;z-index:5;line-height:20px;vertical-align:middle">-->
    <!--      <el-switch style="margin-top:-3px;" v-model="params.switchBool" active-color="#00aeef"-->
    <!--                 @change="switchBoolChange"></el-switch>-->
    <!--      <span style="color:#ffffff;font-size:16px">隐藏粮仓</span>-->
    <!--      &nbsp;&nbsp;&nbsp;-->

    <!--      <el-switch style="margin-top:-3px;" v-model="params.tagBool" active-color="#00aeef"-->
    <!--                 @change="tagBoolChange"></el-switch>-->
    <!--      <span style="color:#ffffff;font-size:16px">显示标签</span>-->
    <!--      <br><br>-->
    <!--      <el-switch style="margin-top:-3px;" v-model="params.rainBool" active-color="#00aeef"-->
    <!--                 @click="rainBoolChange"></el-switch>-->
    <!--      <span style="color:#ffffff;font-size:16px">天气可视</span>-->
    <!--      &nbsp;&nbsp;&nbsp;-->
    <!--      <el-switch style="margin-top:-3px;" v-model="params.clipBool" active-color="#00aeef"-->
    <!--                 @click="clipBoolChange"></el-switch>-->
    <!--      <span style="color:#ffffff;font-size:16px">关闭剖切</span>-->
    <!--    </div>-->
  </div>
  <div v-cloak id="tan" style="width:500px;height:400px;" ref="tan"
       :style="{left:params.left + 'px',top:params.top + 'px'}"
       v-show="params.bool">
    <div style="position:relative;">
      <div style="position: absolute;left: 0px;top: 0px;">
        <img src="/Three/UI/panel/2.png" alt="" style="width:400px;opacity: 1.0;">
      </div>
      <div style="position:absolute;left:25px;top:40px;font-size:16px">{{ params.currentMesh.code }}</div>
      <div style="position:absolute;left:290px;top:25px">
        <img src="/Three/UI/temperature/2.png" alt="" style="width:50px;">
      </div>
      <div style="position:absolute;left:330px;top:40px">
        {{ params.currentMesh.temperature }} ℃
      </div>
      <div style="position:absolute;left:170px;top:50px">{{ params.currentMesh.name }}(吨)</div>
      <div style="position:absolute;left:80px;top:85px;font-size:60px;color:#00ffff;vertical-align:middle">
        <img :src="params.currentMesh.iconpath" alt="" style="width:60px;">
      </div>
      <div style="position:absolute;left:155px;top:80px;font-size:60px;color:#00ffff;vertical-align:middle">
        {{ Math.floor(params.currentMesh.ton) }}t
      </div>
      <div style="position:absolute;left:70px;top:170px;padding:8px 25px;border-radius:30px;border:1px solid #00ffff;">
        仓高—{{ params.currentMesh.tankHeight }} m
      </div>
      <div style="position:absolute;left:225px;top:170px;padding:8px 25px;">粮高—{{ params.currentMesh.oilHeight }} m
      </div>
    </div>
  </div>

</template>
<style lang="scss">
#tan {
  position: absolute;
  color: #fff;
  z-index: 102;
  font-size: 16px;
}

#tan0 {
  position: absolute;
  color: #fff;
  background: rgba(2, 4, 27, 0.8);
  padding: 20px;
  border-radius: 5px;
  border: 1px solid #00aeef;
  z-index: 102;
  width: 180px;
  font-size: 16px;
}

#tan0 > div {
  padding: 5px;
}

#left {
  position: absolute;
  z-index: 200;
  width: 150px;
  background: rgba(255, 255, 255, 1.0);
  padding: 15px;
  height: 100%;
}

[v-cloak] {
  display: none;
}

.HUD {
  box-shadow: 0 0 2px #00ffff inset;
  background: linear-gradient(#00ffff, #00ffff) left top,
  linear-gradient(#00ffff, #00ffff) left top,
  linear-gradient(#00ffff, #00ffff) right bottom,
  linear-gradient(#00ffff, #00ffff) right bottom;
  background-repeat: no-repeat;
  background-size: 1px 6px, 6px 1px;
  background-color: rgba(255, 255, 255, 0.1);

  color: #ffffff;
  font-size: 16px;
  padding: 4px 10px;
}
</style>
